<template>
  <el-container>
    <el-main>
      <el-select
        v-model="value"
        clearable
        filterable
        placeholder="请选择要查看的科目"
        @keyup.enter.native='getsec(value)'
      >
        <el-option
          v-for="item in sections"
          :key="item.sid"
          :label="item.sectionName"
          :value="item.sid"
        >
        </el-option>
      </el-select>
      <el-button
        @click="getsec(value)"
        style="margin-left:40px;margin-right:20px"
        type="primary"
        class="el-icon-upload el-icon--right"
      > 搜索</el-button>
      <el-table
        class="table table-hover"
        style="table-layout:fixed;text-align:left;margin-top:20px"
        width="100%"
        :data="section.threads"
      >
        <el-table-column
          label="题目编号"
          prop="tid"
        ></el-table-column>
        <el-table-column
          label="题目标题"
          prop="title"
        ></el-table-column>
        <!-- <el-table-column>
             <template slot="header" >
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
               </template>
          </el-table-column> -->
        <el-table-column align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import { request } from 'network/request'
export default {
  name: 'ManageThread',
  data () {
    return {
      value: '',
      index: 0,
      sections: [],
      section: {},
      form: { sectionName: '' }
    }
  },
  mounted () {
    request({
      url: '/section',
      method: 'get'
    }).then(res => {
      // console.log(res.status);
      // console.log(res.data);
      this.sections = res.data.sections
    })
  },
  methods: {
    getsec (value) {
      // console.log(value);
      this.index = value
      request({
        url: '/section/' + value,
        method: 'get'
      }).then(res => {
        // console.log(res.status);
        // console.log(res.data);
        this.section = res.data.section
      })
    },
    handleDelete (obj) {
      // console.log(obj)
      request({
        url: '/thread/' + obj.tid,
        method: 'delete'
      }).then(res => {
        // console.log(res)
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
        this.getsec(this.index)
      }).catch(err => {
        if (err) {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        }
      })
    }
  }
}
</script>

<style lang = "less" scoped>
.tac {
  text-align: left;
  padding: 0px !important;
}
</style>
